{% load i18n qatrack_tags part_tags %}

{% block extrastyle %}
    <style type="text/css">
        .width-100 {
            width: 100%;
        }
        td.delete {
            text-align: center;
        }
        td.original,
        th.original {
            display: none;
        }
        tbody > tr.form-row {
            padding: 0 10px;
        }
        textarea {
            resize: none;
        }
        table > tbody > tr.form-row > td {
            padding: 3px 8px !important;
        }
        div.part-list-container {
            height: 38px;
            overflow: hidden;
            position: relative;
        }
        div.part-list > ul {
            margin-bottom: 0;
        }
        div.parts-hover > ul {
            padding-left: 30px;
        }
        div.part-list > ul > li,
        div.parts-hover > ul > li {
            list-style-type: none;
            font-size: smaller;
            line-height: 15px;
        }
        div.parts-hover {
            position: absolute;
            box-shadow: 2px 6px 4px rgba(53, 124, 165, .25);
            border: 1px solid #bbb;
            background-color: #fff;
        }
        div.box-shadow {
            height: 100%;
            width: 100%;
            box-shadow: inset 0 -25px 50px -20px #fff;
            position: absolute;
            top:0;
            left:0;
        }
        div#loading-cover {
            background-color: #ddefff;
            opacity: 0.7;
            width: 100%;
            text-align: center;
            padding: 100px 0;
            top: 0;
            position: absolute;
            font-weight: bold;
        }
        ul#warning-msg {
            display: none;
            text-align: right;
        }
        td.has-error input {
            border-color: #ba2121;
        }
    </style>
{% endblock %}

{% load i18n admin_urls static admin_modify %}
<div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group"
     data-inline-type="tabular"
     data-inline-formset="{{ inline_admin_formset.inline_formset_data }}">
    <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
        {{ inline_admin_formset.formset.management_form }}

        <fieldset class="module {{ inline_admin_formset.classes }}">
            <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
            {{ inline_admin_formset.formset.non_form_errors }}

            <table id="storage-table">
                <thead>
                <tr>
                    <th class="original"></th>
                    {% for field in inline_admin_formset.fields %}
                        {% if not field.widget.is_hidden %}
                            <th{% if field.required %} class="required"{% endif %}>{{ field.label|capfirst }}
                                {% if field.help_text %}&nbsp;
                                    <img src="{% static "admin/img/icon-unknown.svg" %}" class="help help-tooltip"
                                         width="10" height="10" alt="({{ field.help_text|striptags }})"
                                         title="{{ field.help_text|striptags }}"/>{% endif %}
                            </th>
                        {% endif %}
                    {% endfor %}
                    <th>Parts currently in storage<br>(Quantity) Part</th>
                    {% if inline_admin_formset.formset.can_delete %}
                        <th>{% trans "Delete?" %}</th>
                    {% endif %}
                </tr>
                </thead>

                <tbody>
                {% for inline_admin_form in inline_admin_formset %}
                    {% if inline_admin_form.form.non_field_errors %}
                        <tr>
                            <td colspan="{{ inline_admin_form|cell_count }}">{{ inline_admin_form.form.non_field_errors }}</td>
                        </tr>
                    {% endif %}
                    <tr class="form-row {% cycle "row1" "row2" %} {% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}{% if forloop.last %} empty-form{% endif %}"
                        id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
                        <td class="original">
                            {% if inline_admin_form.original or inline_admin_form.show_url %}
                                <p>
                                {% if inline_admin_form.original %}
                                    {{ inline_admin_form.original }}
                                    {% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
                                        <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}"
                                           class="inlinechangelink">{% trans "Change" %}</a>
                                    {% endif %}
                                {% endif %}
                                {% if inline_admin_form.show_url %}
                                    <a href="{{ inline_admin_form.absolute_url }}">{% trans "View on site" %}</a>
                                {% endif %}
                                </p>
                            {% endif %}
                            {% if inline_admin_form.needs_explicit_pk_field %}
                                {{ inline_admin_form.pk_field.field }}{% endif %}
                            {{ inline_admin_form.fk_field.field }}
                            {% spaceless %}
                                {% for fieldset in inline_admin_form %}
                                    {% for line in fieldset %}
                                        {% for field in line %}
                                            {% if field.field.is_hidden %} {{ field.field }} {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                {% endfor %}
                            {% endspaceless %}
                        </td>
                        {% for fieldset in inline_admin_form %}
                            {% for line in fieldset %}
                                {% for field in line %}
                                    {% if not field.field.is_hidden %}
                                        <td{% if field.field.name %} class="field-{{ field.field.name }}{% if field.field.errors %} has-error{% endif %}"{% endif %}>
                                            {% if field.is_readonly %}
                                                <p>{{ field.contents }}</p>
                                            {% else %}
                                                {{ field.field }}
                                                {{ field.field.errors.as_ul }}
                                            {% endif %}
                                        </td>
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                        {% endfor %}
                        <td class="part-list-td">{% part_list_in_storage inline_admin_form.form.instance %}</td>
                        {% if inline_admin_formset.formset.can_delete %}
                            <td class="delete">{% if inline_admin_form.original and inline_admin_form.form.initial.location %}
                                {{ inline_admin_form.deletion_field.field }}{% endif %}</td>
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div id="loading-cover" style="height: {% widthratio inline_admin_formset.forms|length 1 40 %}px;">Loading...</div>
        </fieldset>
    </div>
</div>

{% block after_inline %}
    <ul id="warning-msg" class="messagelist">
        <li class="warning">Warning: Deleting storage from room will reduce part quantity by amount listed.</li>
    </ul>
{% endblock %}

<script type="text/javascript">
    (function($) {
        $(document).ready(function ($) {

            var $autosize = $('textarea.autosize'),
                $loading_cover = $('div#loading-cover'),
                $hover_div = $('<div class="parts-hover"></div>'),
                $warning_msg = $('#warning-msg'),
                $delete_checks = $('td.delete > input');

            autosize($autosize);

            $autosize.on('autosize:resized', function(){
                var height = $(this).height() + 12,
                    $list_container = $(this).parent().siblings('td.part-list-td').find('div.part-list-container');
                $list_container.css({height: height});
            }).trigger('autosize:resized');

            $('body').append($hover_div);

            $('div.part-list-container').not('.one').mouseenter(
                function() {

                    var $self = $(this),
                        $ul = $self.find('ul');
                    var top = $self.offset().top,
                        left = $self.offset().left,
                        width = $self.width() + 10,
                        height = $ul.height() + 10;

                    $hover_div.html($(this).find('.part-list').html())
                        .css({top: top, left: left, width: width, height: height})
                        .show();
                }
            );

            $delete_checks.change(function() {
                var show = false;
                $.each($delete_checks, function() {
                    if ($(this).is(':checked')) {
                        if ($(this).parent().siblings('td.part-list-td').find('div.part-list-container').length > 0) {
                            show = true;
                            return false;
                        }
                    }
                });
                show ? $warning_msg.fadeIn('fast') : $warning_msg.fadeOut('fast');
            });

            $hover_div.mouseleave(function() {
                $hover_div.hide();
            });

            $loading_cover.fadeOut('fast', function() {
                $loading_cover.remove();
            });

        })
    })(django.jQuery);
</script>